<template>
    <div class="main">
        <div class="sq_header " :style="{background:`url('${bg}')`,backgroundSize: 'cover'}">
            <my-head/>
            <div class="sq-header-mark"></div>
            <div class="sq-header-title f2">
                <span class="path" @click="()=>{$router.push('/')}" style="cursor: pointer">首页 > </span>
                <span class="path" v-for="p in path" @click="()=>{$router.push(p.path)}" style="cursor: pointer">{{ p.name }}</span>
                <hr>
                <div class="title-box">
                    <div class="title  f1">
                        {{ title }}
                    </div>
                    <div class="input-box" v-show="showSearch">
                        <input v-model="searchText" type="text" placeholder="您有什么想问的？">
                        <div class="input-ver"></div>
                        <div @click="$emit('search',searchText)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-sousuo"></use>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="sq_contents_box">
            <div class="sq_main_contents_warp"
                 :style="{background:`url('${contentBg}')`,backgroundSize: 'cover',...wrapStyle}">
                <slot/>
            </div>
        </div>
        <my-footer/>
    </div>
</template>

<script>
import myHead from "@/components/header";
import myMenu from "@/components/menu";
import myFooter from "@/components/footer";

export default {
    name: "framework",
    props: ["title", "path", "headerStyle", "bg", "contentBg", "wrapStyle", "showSearch"],
    components: {
        myHead, myMenu, myFooter
    },
    data() {
        return {
            background: "",
            searchText: "",
        }
    },
    mounted() {
        //console.log(this.bg)
    }
}
</script>

<style lang="less" scoped>
.main {
    background-color: #FFFFFF;
    .sq_header {
        position: relative;
        padding-bottom: 100px;

        .sq-header-mark {
            width: 100%;
            height: 100%;
            position: absolute;
            background: rgba(0, 0, 0, 0.6);
            z-index: 1;
            top: 0;
        }

        .sq-header-title {
            //width: calc(100% - 120px);
            //margin-left: 60px;
            //padding: 0 360px;
            width: 1200px;
            margin: 40px auto;
            color: #FFFFFF;

            position: relative;
            z-index: 100;

            .title-box {
                display: flex;
                align-items: center;

                .title {
                    color: #FFFFFF;
                }

                .input-box {
                    display: flex;
                    align-items: center;
                    margin-left: 100px;
                    padding: 5px 20px;
                    border-radius: 5px;
                    width: 60%;
                    background: rgba(255, 255, 255, 0.6);
                    height: 59px;

                    .input-ver {
                        width: 1px;
                        background: #757575;
                        height: 100%;
                        margin: 0 25px;
                    }

                    input {
                        width: 90%;
                        border: none;
                        background: none;
                    }
                }

                .icon {
                    color: #757575;
                    height: 50px;
                    width: 50px;
                    vertical-align: -0.15em;
                    fill: currentColor;
                    overflow: hidden;
                }
            }

            .path {
            }

            hr {
                border: none;
                height: 1px;
                background: #FFFFFF;
                margin: 10px 0;
            }
        }
    }

    .sq_contents_box {
        height: calc(100% - 634px);
        min-height: 254px;
    }

    .sq_main_contents_warp {
        // width: 1200px;
        //padding: 20px 360px;
        margin: 0 auto;
        background-size: cover;
    }
}
</style>
<style lang="less">
@media screen and (min-width: 0px) and (max-width: 680px) {
    #app {
        .main {
            .sq_header {
                overflow: hidden;
                padding-bottom: 10px;

                .sq-header-title {
                    .title-box {
                        justify-content: flex-end;
                        flex-direction: column;

                        .input-box {
                            width: calc(100% - 30px);
                            margin-left: 0;
                            height: 30px;

                            input {
                            }

                            .icon {
                                width: 25px;
                                height: 25px;
                            }
                        }
                    }

                    .path {
                    }

                    .title {
                        text-align: right;
                        width: 100%;
                        margin-bottom: 10px;
                    }
                }
            }

            .sq_contents_box {
                .sq_part_top {
                    .title {
                        font-size: 20px;
                        width: 100px;
                        height: 40px;
                    }

                    .en {
                        font-size: 16px;
                    }
                }
            }

            .sq_main_contents_warp {
                padding: 20px 10px;
                background-size: cover;
            }
        }
    }
}
</style>
